import React, { useState } from 'react';
import { Form, Input, Button, Checkbox, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import './Login.css';

const Login = () => {
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();

  const onFinish = (values) => {
    setLoading(true);
    console.log('Received values:', values);
    
    // 模拟登录API请求
    setTimeout(() => {
      setLoading(false);
      message.success('登录成功!');
      navigate('/dashboard'); // 跳转到仪表盘
    }, 1500);
  };

  return (
    <div className="auth-container">
      {/* 左侧品牌展示区 */}
      <div className="auth-left">
        <h1 style={{ fontSize: '2.5rem', marginBottom: '1rem', zIndex: 1 }}>欢迎回来</h1>
        <p style={{ fontSize: '1.1rem', marginBottom: '2rem', zIndex: 1 }}>
          登录您的账号，继续您的旅程
        </p>
      </div>

      {/* 右侧表单区 */}
      <div className="auth-right">
        <div className="auth-card">
          <img 
            src="https://png.pngtree.com/png-clipart/20190903/original/pngtree-store-icon-png-image_4419850.jpg" 
            alt="Logo" 
            className="auth-logo" 
          />
          <h2 className="auth-title">用户登录</h2>
          
          <Form
            name="login-form"
            className="auth-form"
            initialValues={{ remember: true }}
            onFinish={onFinish}
          >
            <Form.Item
              name="username"
              rules={[{ required: true, message: '请输入用户名!' }]}
            >
              <Input 
                prefix={<UserOutlined />} 
                placeholder="用户名/邮箱" 
                size="large"
              />
            </Form.Item>
            
            <Form.Item
              name="password"
              rules={[{ required: true, message: '请输入密码!' }]}
            >
              <Input.Password 
                prefix={<LockOutlined />} 
                placeholder="密码" 
                size="large"
              />
            </Form.Item>
            
            <Form.Item>
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>记住我</Checkbox>
              </Form.Item>
              <a className="auth-link" style={{ float: 'right' }} href="#">
                忘记密码
              </a>
            </Form.Item>
            
            <Form.Item>
              <Button 
                type="primary" 
                htmlType="submit" 
                size="large"
                loading={loading}
              >
                登录
              </Button>
            </Form.Item>
          </Form>
          
          <div className="auth-footer">
            还没有账号?{' '}
            <a className="auth-link" onClick={() => navigate('/register')}>
              立即注册
            </a>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Login;